// 定义自定义指令
const defineDirective = (app) => {
  // mylazy指令名称
  app.directive('mylazy', {
    mounted(el, bindings) {
      // el表示使用指令的DOM元素
      // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindlings即是xxx对应的内容
      // 指令的功能：实现图片的懒加载
      // 1、监听图片是否进入可视区
      const oberver = new IntersectionObserver(([{ isIntersecting }]) => {
        // true；进入可视区域，false：未进入可视区域
        if (isIntersecting) {
          // 1、给图片的src属性赋值图片的地址
          el.src = bindings.value
          // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
          oberver.unobserve(el)
          // 3、加载的图片失败了，显示默认的图片地址
          el.onerror = () => {
            el.src = "https://img0.baidu.com/it/u=103546618,3013933963&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          }
        }
      })
      // 监听dom元素
      oberver.observe(el)
    },
  })
}
export default {
  install(app) {
    // 自定义指令
    defineDirective(app)
  },
}